<template>
  <el-dialog
    :title="`同步工程：【${currentItem.taskName}】`"
    :visible.sync="own_dialogFormVisible"
    @close="closeConfigBox"
    class="config-box"
  >
    <el-container>
      <el-tabs
        tab-position="left"
        v-model="currentTab"
        @tab-click="changeCurrentTabOfStore"
      >
        <el-tab-pane label="1、目标数据源" name="1">
          <el-main>
            <data-source
              @changeCurrentTab="changeCurrentTab"
              :_syncDataSourceId="currentItem.syncDataSourceId"
            >
            </data-source>
          </el-main>
        </el-tab-pane>
        <el-tab-pane label="2、目标模型" name="2">
          <el-main>
            <target-model></target-model>
          </el-main>
        </el-tab-pane>
        <!-- <el-tab-pane label="3、过滤数据" name="3">
          <el-main>
            <data-filter></data-filter>
          </el-main>
        </el-tab-pane>
        <el-tab-pane label="4、更新策略" name="4">
          <el-main>
            <update-strategy></update-strategy>
          </el-main>
        </el-tab-pane>
        <el-tab-pane label="5、调度任务" name="5">
          <el-main>
            <task-dispatcher></task-dispatcher>
          </el-main>
        </el-tab-pane> -->
        <!-- <el-tab-pane label="6、授权工程" name="6">
          <el-main>
            <auth-engineering></auth-engineering>
          </el-main>
        </el-tab-pane> -->
      </el-tabs>
    </el-container>
  </el-dialog>
</template>
<script>
import DataSource from "./dataSource/dataSource.vue";
import TargetModel from "./targetModel/targetModel.vue";
import DataFilter from "./dataFilter/index.vue";
import UpdateStrategy from "./updateStrategy/index.vue";
import TaskDispatcher from "./taskDispatcher/index.vue";
import AuthEngineering from "./authEngineering/index.vue";
import { mapState, mapMutations } from "vuex";
export default {
  name: "ConfigBox",
  components: {
    DataSource,
    TargetModel,
    // DataFilter,
    // UpdateStrategy,
    // TaskDispatcher,
    // AuthEngineering,
  },
  props: {
    currentItem: {
      type: Object,
      required: true,
    },
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  data: () => {
    return {
      own_dialogFormVisible: false,
      currentTab: "1",
    };
  },
  computed: {
    ...mapState({
      conifgBoxIsOpen: (state) => state.dataCollection.conifgBoxIsOpen,
    }),
  },
  created() {},
  mounted() {},
  methods: {
    ...mapMutations({
      toggleCurrentTab: "dataCollection/toggleCurrentTab",
    }),
    closeConfigBox() {
      this.$emit("closeConfigBox");
    },
    changeCurrentTabOfStore() {
      this.toggleCurrentTab(this.currentTab);
    },
    changeCurrentTab(tab) {
      this.currentTab = tab;
      this.toggleCurrentTab(this.currentTab);
    },
  },
  watch: {
    dialogFormVisible: {
      handler: function (val) {
        this.own_dialogFormVisible = val;
      },
      immediate: true,
    },
    conifgBoxIsOpen: {
      handler: function (val) {
        this.currentTab = val ? "1" : this.currentTab;
      },
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.config-box.el-dialog__wrapper {
  /deep/.el-dialog {
    width: 70%;
    .el-dialog__body {
      padding: 0 0px;
    }
  }
  /deep/.el-tabs--left .el-tabs__item.is-left {
    text-align: left;
    padding: 0 20px 0 30px;
    &.is-active {
      background-color: rgba(64, 158, 255, 0.2);
    }
  }
  /deep/.el-tabs__header {
    width: 150px;
  }
  .el-tabs {
    width: 100%;
  }
  .el-main {
    height: 667px;
  }
}
@media screen and (max-height: 800px) {
  .config-box.el-dialog__wrapper {
    /deep/.el-dialog {
      margin-top: 30px !important;
    }
  }
}
@media screen and (max-width: 1440px) {
  .config-box.el-dialog__wrapper {
    /deep/.el-dialog {
      width: 80%;
    }
  }
}
</style>
